<template>
  <div class="coment myCenter">
    <div class="top_box">
      <div class="headerBox" :class="headerFix?'headerFix':''">
        <van-nav-bar
          title="港湾码头"
        />
      </div>
      <div class="user_box">
        <div class="userInfo">
          <img :src="userInfo.head?userInfo.head: '../../assets/img/user/headImg.png'" alt="" class="userImg">
          <div class="info">
            <span class="name">{{userInfo.username?userInfo.username:''}}</span>
            <div class="userId">邀请码: 
              <span v-if="userInfo&&userInfo.no">{{userInfo.no}}</span>
            </div>
          </div>
          <img src="../../assets/img/user/icon_erweima.png" alt="" class="shareEwm" @click="openShare(1)">
        </div>
      </div>
    </div>
    
    <div >
      
      <!-- <div class="busin_box">
        <div class="one_box" @click="goBack('myOrder')"></div>
        <div class="one_box" @click="goBack('myAuthentication')">
          <span class="label" v-if="!userInfo.inside_user_real_name"></span>
        </div>
        <div class="one_box" @click="goBack('myInfo')"></div>
      </div> -->
      <!-- <div class="partition"></div> -->
      <div class="samll_box" v-for="(item,indexs) in setInfoList" :key="indexs" @click="goBack(item.link,item.num)">
        <img :src="item.icon" alt="">
        <p>{{item.name}}</p>
        <i class="jt"></i>
      </div>
      <div class="samll_box" @click="openShare(2)" v-if="userInfo.id==2513 || userInfo.id==6580">
        <img src="@/assets/img/user/icon_ipfs.png" alt="">
        <p>收益海报</p>
        <i class="jt"></i>
      </div>
      <div class="samll_box" @click="goOut">
        <img src="@/assets/img/user/icon_tuichu.png" alt="">
        <p>退出</p>
        <i class="jt"></i>
      </div>
    </div>
    <!-- <div class="footer_box">
      <div class="lf_img" @click="go">
        <img src="../../assets/img/sy_icon.png" alt="">
      </div>
      <div class="rg_img">
        <img src="../../assets/img/gr_active_icon.png" alt="">
      </div>
    </div> -->
    
    <van-overlay :show="show" @click="onClickHide">
      <div class="wrapper">
        <div class="block">
          <img src="../../assets/img/user/iphone.png" alt="">
          <p class="til_hj">港湾客服</p>
          <div class="yw_tel">
            <a href="tel:400-960-6113">
              业务客服热线 400-960-6113
            </a>
          </div>
          <!-- <div class="yw_tel">
            <a href="tel:17623236868">
              技术客服热线 17623236868
            </a>
          </div> -->
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="outShow">
      <div class="wrapper">
        <div class="block_out">
          <img src="../../assets/img/user/ku.png" alt="">
          <div style="font-size: .36rem;color:#000;margin:.14rem 0 .24rem;">提示</div>
          <div style="font-size: .30rem;color:#000;">您确定要退出吗？</div>
          <div style="margin-top: 1rem;" class="btn_bb">
            <span @click="outShow = false">取消</span>
            <span @click="quit">确定</span>
          </div>
        </div>
      </div>
    </van-overlay>

    <div style="opacity: 0;z-index:-1" class="shaer_wai">
      <div class="wrappers" >
        <div id="shaer_box_two">
          <div style="width:100%;font-size:0;">
            <img src="../../assets/img/user/earningsImg.png" alt="">
          </div>
          <div class="e_time">{{time + ' ' + '10:00'}}</div>
          <div class="all_data" v-if="gAlldata">
            <div style="padding-left:2rem">{{gAlldata.networkStoragePower?gAlldata.networkStoragePower: 0}}</div>
            <div style="padding-left:2.34rem">{{gAlldata.filProduction?gAlldata.filProduction: 0}}</div>
            <div style="padding-left:3.18rem">{{gAlldata.averageMiningReward?gAlldata.averageMiningReward: 0}}</div>
            <div style="padding-left:2.4rem">{{gAlldata.totalPledgeCollateral?gAlldata.totalPledgeCollateral: 0}}</div>
            <div style="padding-left:2.28rem">{{gAlldata.currentSectorInitialPledge?gAlldata.currentSectorInitialPledge: 0}}</div>
            <div style="padding-left:2rem">{{gAlldata.blockReward?gAlldata.blockReward: 0}}</div>
          </div>
          <div class="botm_data" v-if="qAlldata">
            <div>
              <span>{{qAlldata.networkStoragePower?qAlldata.networkStoragePower: 0}}</span>
              <span class="rig">{{qAlldata.filProduction?qAlldata.filProduction:0}}</span>
            </div>
            <div style="margin:.65rem 0">
              <span>{{qAlldata.blockReward?qAlldata.blockReward: 0}}</span>
              <span class="rig">47180 T</span>
            </div>
            <div style="margin-bottom:.65rem">
              <span>{{qAlldata.filProduction?cutOut(qAlldata.filProduction):0}} FIL</span>
            </div>
            <div style="margin-bottom:.7rem">
              <span>{{qAlldata.filProduction?(cutOut(qAlldata.filProduction)*0.8).toFixed(9):0}} FIL</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="opacity: 0;z-index:-1" class="shaer_wai">
      <div class="wrappers" >
        <div id="shaer_box">
          <div style="width:100%;font-size:0;">
            <img src="../../assets/img/user/shareImg.png" alt="">
          </div>
          <div class="er_box">
            <div id="qrcode" ref="qrcode"></div> 
          </div>
        </div>
      </div>
    </div>
    <div class="shareBox" v-if="base64shareImg && isShare">
      <div class="shareBox_model"></div>
      <div class="imgBoxs">
        <img :src="base64shareImg" alt="">
      </div>
      <shareBox v-model="isShare" :shareURL='base64shareImg'></shareBox>
    </div>
  </div>
</template>
<script>
import shareBox from '@/components/shareBox'
import html2canvas from 'html2canvas'
import QRCode from "qrcodejs2"; 
import config from "@/config/env";
export default {
  data() {
    return {
      gAlldata: {},
      qAlldata: {},
      headerFix: false,
      show: false,
      outShow: false,
      isShare: false,
      base64shareImg: '',
      setInfoList: [
        {
          name: '我的订单',
          url: 'setInfo',
          icon: require('@/assets/img/user/icon_wode.png'),
          link: 'myOrder',
          num: 0
        },
        {
          name: '我的好友',
          url: 'setInfo',
          icon: require('@/assets/img/user/icon_frends.png'),
          link: 'myFriend',
          num: 0
        },
        {
          name: '我的认证',
          url: 'setInfo',
          icon: require('@/assets/img/user/icon_haoyou.png'),
          link: 'myAuthentication',
          num: 0
        },
        {
          name: '我的资料',
          url: 'setInfo',
          icon: require('@/assets/img/user/icon_yinghk.png'),
          link: 'myInfo',
          num: 0
        },
        // {
        //   name: '客服热线',
        //   url: 'setInfo',
        //   icon: require('@/assets/img/user/icon_rexian.png'),
        //   link: 'show',
        //   num:1
        // },
        {
          name: '关于我们',
          url: 'setInfo',
          icon: require('@/assets/img/user/icon_ipfs.png'),
          link: 'aboutUs',
          num: 0
        },
        {
          name: '设置',
          url: 'setInfo',
          icon: require('@/assets/img/user/icon_shezhi.png'),
          link: 'mySet',
          num: 0
        }
      ],
      userInfo: {},
      url: '',
      time: ''
    };
  },
  components: {
    shareBox
  },
  activated() {
    this.url=config.domain+'signIn'
    let _this = this
    this.setUserInfo()
  },
  mounted(){
    this.setUserInfo()
    this.time = this.getNowFormatDate()
    this.setdaily()
  },
  methods: {
    cutOut(val) {
      console.log()
      let v = val.replace(/[^\d.]/g,'')
      let value = (v/47180).toFixed(9)
      console.log(value)
      return value
    },
    async setdaily() {
      let res = await this.$http.getCurrentMiningData()
      if (res) {
        console.log(res.data)
        // if (res.data[0].miningType == 2){
        //   this.gAlldata = res.data[0];
        // } else {
        //   this.qAlldata = res.data[1];
        // }
        res.data.map((item)=>{
          if(item.miningType==2) {
            this.gAlldata = item;
          } else {
            this.qAlldata = item;
          }
        })
        console.log(this.gAlldata)
        console.log(this.qAlldata)
      }
    },
    getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + '年' + month + '月' + strDate + '日';
        // console.log(currentdate)
        return currentdate;
    },
     go(){
      this.$router.push({path:'/'})
    },
    qrcode () {
      if (document.getElementById("qrcode")) {
        document.getElementById("qrcode").innerHTML=""
      }
      let recomNo = this.userInfo.no
      let qrcode = new QRCode("qrcode", {
        width: 110,
        height: 110,
        text: `${this.url}?recomNo=${recomNo}`
      });
    },
    openShare(type) {
      let _this = this
      let instance = _this.$toast.loading({
        message: '图片生成中...',
        forbidClick: true,
      });
      // _this.qrcode()
      var _procheck
      if (type == 1) {
        _procheck = document.getElementById('shaer_box')
      } else {
        _procheck = document.getElementById('shaer_box_two')
      }
      var width = _procheck.offsetWidth // 获取dom 宽度
      var height = _procheck.offsetHeight-1 // 获取dom 高度
      var _canvas = document.createElement('canvas') // 创建一个canvas节点
      var scale = 2 // 定义任意放大倍数 支持小数
      _canvas.width = width * scale // 定义canvas 宽度 * 缩放
      _canvas.height = height * scale // 定义canvas高度 *缩放
      _canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
      var opts={
        scale:scale,
        canvans: _canvas,
        logging:true,
        width:width,
        height:height
      }
      html2canvas(_procheck, opts).then(function (_canvas) {
        var context = _canvas.getContext('2d')
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false
        context.webkitImageSmoothingEnabled = false
        context.msImageSmoothingEnabled = false
        context.imageSmoothingEnabled = false
        let dataURL = _canvas.toDataURL('image/png')
        _this.base64shareImg = dataURL
        setTimeout(() => {
          instance.close()
          _this.isShare = true
          // !self.$route.query.dev && self.saveImg(dataURL)
        }, 300)
      })
    },
    quit() {
      // localStorage.removeItem('userInfo');
      localStorage.removeItem('userInfor');
      this.outShow=false
      this.$router.push({name:'login'})
    },
    goOut () {
      this.outShow = true
    },
    onClickHide() {
      this.show = false
    },
    async setUserInfo() {
      let self = this
      let res = await this.$http.getUserInfo()
      if (res) {
        this.userInfo = res.data
        this.qrcode()
      }
    },
    goBack(link,num) {
      console.log(link)
      if (link!="show") {
        this.$router.push({name: link})
      } else {
        this.show = true
      }
    }
  },
};
</script>
<style>
.myCenter .headerBox{
  background: none;
}
.coment .van-nav-bar{
  background-color:transparent;
  transition: all .2s;
}
.coment .van-nav-bar .van-icon,.coment .van-nav-bar__title{
  color: #fff !important;
  font-size: 0.36rem;
  font-weight: 400 !important;
}
.coment .van-hairline--bottom::after{
  border-bottom-width:0
}
</style>
<style scoped>
.botm_data{
  position: absolute;
  width: 6rem;
  height: 4rem;
  top: 9.14rem;
  left: .76rem;
  font-size: .3rem;
  font-weight: 600;
  padding-top: .4rem;
}
.botm_data div{
  line-height: .42rem;
}
.botm_data div span:nth-child(1) {
  display: inline-block;
  width: 2.5rem;
}
.rig{
  margin-left: 1.2rem;
}
.all_data{
  width: 6rem;
  height: 2.48rem;
  position: absolute;
  top: 4.36rem;
  left: .76rem;
  font-size: .28rem;
  font-weight: 600;
}
.all_data div{
  line-height: .4rem;
  margin-bottom: .04rem;
}
.e_time{
  position: absolute;
  color: #fff;
  top: 3rem;
  left: 1rem;
  font-size: .28rem;
  font-weight: 600;
  width: 5.4rem;
  text-align: center;
  line-height: .38rem;
  opacity: .9;
}
.footer_box{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.66rem;
  padding: .2rem .28rem .54rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0px -0.04rem 0.08rem 0px rgba(0,0,0,0.05);
}
.lf_img,.rg_img{
  width: 3.36rem;
  height: .92rem;
}
.lf_img img,.rg_img img {
  width: 100%;
  height: 100%;
}
.coment {
  padding: 0 0 1rem;
  background: #fff;
  height: 100vh;
  overflow: hidden;
}
.top_box{
  width: 100%;
  height: 3.8rem;
  background: url('../../assets/img/myBg.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: .14rem;
}
.title {
  font-size: 0.44rem;
  color: #333333;
  font-weight: 600;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 .29rem;
  margin-bottom: 0.2rem;
}
.user_box{
  padding: 0 .29rem;
}
.userInfo {
  width: 100%;
  height: 1.52rem;
  /* background: linear-gradient(219deg, #264564 0%, #0a141f 100%); */
  /* background: url('../../assets/img/user/icon_di@2x.png') no-repeat;
  background-size: contain; */
  border-radius: .08rem;
  padding: .28rem .29rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.userImg{
  width: .96rem;
  height: .96rem;
  border-radius: 50%;
}
.info{
  width: 4.5rem;
  color: #fff;
}
.info .name{
  font-size: .3rem;
  position: relative;
  top: .07rem;
}
.info .agency{
  width: 1.64rem;
  height: .36rem;
  display: inline-block;
  margin-left: .2rem;
  background: #006CE7;
  font-size: .22rem;
  text-align: center;
  line-height: .36rem;
  border-radius: .17rem;
  position: relative;
  top: .03rem;
}
.dl{
  display: inline-block;
  width: .24rem;
  height: .16rem;
  background: url('../../assets/img/qianbao1@2x.png')no-repeat;
  background-size: 100% 100%;
}
.shareEwm{
  width: .76rem;
  height: .76rem;
  position: relative;
  top: 0.1rem;
  border-radius: .04rem;
}
.userId{
  font-size: .29rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.2rem;
}
.busin_box{
  padding: 0 .29rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  margin-top: .12rem;
  margin-bottom: .2rem;
}
.one_box{
  width: 2.22rem;
  height: 1.52rem;
  background: url('../../assets/img/user/icon_dingdan.png') no-repeat;
  background-size:100% 100%;
  border-radius: .08rem;
  text-align: center;
  position: relative;
}
.one_box:nth-child(2) {
  background: url('../../assets/img/user/icon_yewudaili.png') no-repeat;
  background-size:100% 100%;
}
.one_box:nth-child(3) {
  background: url('../../assets/img/user/icon_tuoguan.png') no-repeat;
  background-size:100% 100%;
}
.partition{
  width: 100%;
  height: .06rem;
  background: #F1F1F1;
}
.samll_box{
  width: 100%;
  height: .96rem;
  padding: .24rem .4rem .24rem .29rem;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.samll_box img{
  width: .48rem;
  height: .48rem;
}
.samll_box p{
  width: 5.6rem;
  height: .48rem;
  line-height: .48rem;
  color: #333333;
  font-size: .29rem;
}
.samll_box .jt{
  display: inline-block;
  width: .3rem;
  height: .3rem;
  background: url('../../assets/img/user/right.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: .1rem;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 6.54rem;
  /* height: 5.20rem; */
  height: 4.20rem;
  background: #FFFFFF;
  border-radius: .12rem;
  position: relative;
  padding: .9rem .48rem;
  text-align: center;
}
.block img{
  width: 1.46rem;
  height: 1.46rem;
  border-radius: 50%;
  position: absolute;
  top: -.76rem;
  left: 2.54rem;
}
.til_hj{
  font-size: .36rem;
  color: #000;
  font-weight: bold;
}
.yw_tel{
  /* width: 4.74rem;
  height: .88rem;
  line-height: .88rem;
  text-align: center;
  background: #F5F5F5;
  border-radius: .44rem;
  font-size: .3rem;
  color: #000;
  font-weight: bold;
  margin: 0 auto;
  margin-top: .4rem; */
  width: 4.74rem;
  height: .88rem;
  line-height: .88rem;
  text-align: center;
  background: #F5F5F5;
  border-radius: .44rem;
  font-size: .3rem;
  color: #000;
  font-weight: bold;
  margin: 0 auto;
  margin-top: .8rem;
}
.yw_tel a{
  color: #000;
}
.block_out{
  width: 6.54rem;
  height: 4.36rem;
  background: #FFFFFF;
  border-radius: .12rem;
  padding: .8rem .2rem 0;
  position: relative;
  text-align: center;
  font-size: .3rem;
  font-weight: bold;
}
.block_out img{
  width: 1.66rem;
  height: 1.66rem;
  border-radius: 50%;
  position: absolute;
  top: -0.83rem;
  left: 2.44rem;
}
.shaer_wai{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
}
/* .shaer_wai .wrappers{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
} */
#shaer_box,#shaer_box_two{
  width: 100%;
  overflow: hidden;
}
#shaer_box img,#shaer_box_two img{
  width: 100%;
}
#qrcode{
  width: 100%;
}

.shareBox{
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 3;
  top: 0;
  left: 0;
}
.shareBox_model{
  width: 100%;
  height: 100vh;
  background:#000;
  opacity: .6;
  position: absolute;
  top: 0;
  left: 0;
}
.shareBox .imgBoxs{
  /* width: 5rem; */
  position: absolute;
  /* top: 1rem; */
  left: 50%;
  height: calc(100vh - 230px);
  transform: translate3d(-50%,10%,0);
  
}
.shareBox .imgBoxs >img{
  height: 100%;
}
.er_box{
  width: 120px;
  height: 120px;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  top: 12rem;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
}
.label{
  position: absolute;
  width: .9rem;
  height: .36rem;
  background: url('../../assets/img/weiren.png')no-repeat;
  background-size: 100% 100%;
  border-radius: .18rem;
  top: .08rem;
  right: 0;
}
.btn_bb span{
  display: inline-block;
  width: 2.7rem;
  height: .82rem;
  text-align: center;
  color: #fff;
  line-height: .82rem;
  background: #C8CEDA;
  border-radius: 2rem;
  margin-right: .3rem;
}
.btn_bb span:nth-child(2){
  margin-right: 0;
  background: #F30F0F;
}
</style>
